<template>
    <div class="container">

        <div class="body_wrap">
            <el-card class="body_card" shadow="hover" ref="content_card">
                <div class="header_back_wrap">
                    <el-page-header @back="$router.back(-1)" :content="$route.meta.title" class="headerBack"></el-page-header>
                    <el-divider></el-divider>
                </div>

                <div class="form_content">
                    <div class="table_form_wrap">
                        <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">

                            <el-form-item label="收件人" prop="to">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.to" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="抄送人" prop="cc">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.cc" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="暗送人" prop="bcc">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.bcc" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="邮件标题" prop="subject">
                                <el-input placeholder="" v-model="form.subject" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="邮件正文" prop="content">
                                <div id="editor" style="width: 90%"></div>
                            </el-form-item>

                        </el-form>
                    </div>
                </div>

                <div class="foot_submit">
                    <el-button @click="$router.back(-1)">返 回</el-button>
                    <el-button @click="handleSubmit" type="primary" :submitLoading="submitLoading">提 交</el-button>
                </div>

            </el-card>
        </div>



    </div>
</template>

<script>
import E from "wangeditor";
import Config from '@/config'
var OSS = require('ali-oss');
import { getUUID } from "@/libs";
export default {
    data() {
        return {
            submitLoading: false,
            clinet: null,
            editor: null,
            loading: false,
            progress: 0,
            form: {
                subject: '',
                to: '',
                cc: null,
                bcc: null,
                content: ''
            },
            rules: {
                subject: [
                    { required: true, message: '邮件标题不能为空', trigger: 'blur' }
                ],
                to: [
                    { required: true, message: '收件人不能为空', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '邮件正文不能为空', trigger: 'blur' }
                ]

            }
        }
    },

    created() {
        this.form.id = this.$route.query.id
    },

    mounted() {
        this.$nextTick(function() {
            this.initEditor()
        });
    },

    methods: {

        async initEditor() {
            const _this = this
            // 初始化阿里云OSS
            this.clinet = new OSS(Config.Aliyun.oss);

            const editor = new E('#editor')
            editor.config.showFullScreen = false
            editor.config.zIndex = 1
            editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
            editor.config.uploadVideoAccept = ['mp4']

            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                _this.form.content = newHtml
            }
            // 自定义上传图片
            editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
                _this.loading = _this.$loading({ lock: true, text: '上传中，请稍等', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });

                await _this.handleUpload(resultFiles, insertImgFn)

                _this.loading.close()
            }
            // 自定义上传视频
            editor.config.customUploadVideo = async function (resultFiles, insertVideoFn) {
                _this.loading = _this.$loading({ lock: true, text: '上传中，请稍等', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });

                await _this.handleUpload(resultFiles, insertVideoFn)

                _this.loading.close()
            }
            editor.create()
            this.editor = editor
        },
        /**
         * 上传到阿里云OSS
         */
        async handleUpload(resultFiles, insert) {
            const _this = this
            for(const file of resultFiles) {
                try {
                    let result = await this.clinet.multipartUpload(getUUID(), file, {
                        progress(p, checkpoint) {
                            // console.log('Object的上传进度', p);
                            // console.log('分片上传的断点信息', checkpoint);
                        }
                    })
                    console.log(result);
                    const url = result.res.requestUrls[0].split('?')[0]
                    insert(url)
                } catch(err) {
                    _this.loadingInstance.close()
                    console.log(err);
                }
            }
        },



        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                const res = await this.$http({
                    url: `/system/tools/sendMail`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.submitLoading = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }
    },
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy()
        this.editor = null
    }
}
</script>

<style lang="scss" scoped>



</style>
